$(() => {
  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)


  // 1.4  点击上传, 弹上传框
  $('#btnChooseImage').on('click', function () {
    $('#file').click()
  });

  // 文件上传的事件  change  Input框内的内容改变触发
  $('#file').on('change', function (e) {
    // 拿到上传的文件列表
    // $('#file')[0].files
    // $(this)[0].files
    // e.target.files
    const fileList = $(this)[0].files  // 伪数组,索引0保存的就是上传的文件
    // 判断有没有上传文件
    if (fileList.length == 0) return layer.msg('没有上传文件')
    // 从文件列表拿文件
    const file = fileList[0]
    // 创建图片地址
    const imgUrl = URL.createObjectURL(file)
    // 渲染到页面(使用插件渲染)
    $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', imgUrl)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })

  // 点击确定按钮,裁剪图片,上传图片,重新渲染用户信息
  $('#btnUpload').on('click', function () {
    //裁剪图片,
    var dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
    // data = {
    //   avatar: dataURL
    // }
    // const fd = new FormData()  //fd就是对象
    // const res = $(this).serialize() // key=value&key=value

    //上传图片
    $.ajax({
      type: "post",
      url: "/my/update/avatar",
      data: {
        avatar: dataURL
      },
      // data: data,
      // data: fd,
      // data: res,
      success: function (res) {
        if (res.status != 0) return layer.msg('上传失败!');
        layer.msg('上传成功!');
        // 同步更新index.html的用户信息
        // 拿到本地数据
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        // 更新用户信息
        userInfo.user_pic = dataURL
        // 重置本地存储的信息
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        // 调用index.html的render函数
        window.parent.render(userInfo)
      }
    });
  });
})